<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>User</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <script src="https://apps.bdimg.com/libs/jquer/2.1.4/jquery.min.js">

    </script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script>
        function isNull(str) {
            if (str == "")
                return true;
            var regu = "^[]+$";
            var re = new RegExp(regu);
            return re.test(str);
        }
        $(function () {
            $("#btn4showhide").click(function () {
                if ($("#div4addUser").is(":hidden"))
                    $("#div4addUser").show();
                else
                    $("#div4addUser").hide();
            });
            $("#add").click(function () {
                var nameVal = $("#name").val();
                var pwdVal = $("#pwd").val();
                var roleVal = $("role option:selected").text();
                if (isNull(nameVal)||isNull(pwdVal)||isNull(roleVal)){
                    confirm("请完善信息");
                    return;
                }
                var param = {
                    "name":nameVal,
                    "password":pwdVal,
                    "role":roleVal
                };
                $.ajax({
                    url:"/addUser",
                    data:param,
                    async:true,
                    success:function (result) {
                        window.confirm(result,msg);
                        location.href = "users";
                    }
                });
            });
        });
    </script>
</head>
<body>
<div id="selectResult">
    <table class="table table-dark table-hover">
        <thead>
        <tr>
            <th>用户ID</th>
            <th>用户密码</th>
            <th>用户权限</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user:${userList}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.password}"></td>
            <td th:text="${user.role}"></td>
            <td>
                <a th:href = "@{/user+{id}(id=${user.id})}">修改</a>
                <a th:href = "@{/deleteUser+{id}(id=${user.id})}"id="delete">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div id="addUser">
    <label style="display: block;margin: 0 auto">添加用户</label>
    <form name="addUser">
        <div class="form-group">
            <label for="name">name:</label>
            <input type="text" class="form-control" name="name" id="name">
        </div>
        <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" name="pwd" id="pwd">
        </div>
        <div class="form-check">
            <label for="role">role:</label>
            <select class="form-control" name="role" id="role">
                <option>admin</option>
                <option>user</option>
            </select>
        </div>
        <div class= "form-group" >
            <table>
                <tr>
                    <th>证书</th>
                    <th>操作</th>
                </tr>
                < tr th:each="userImg : ${userImgsList}" >
                <td>
                    <img th:src="${userImg.img}"/>
                </td>
                <td>
                    <input type= "button" id="btnDel" value="删除图片"
                           th:onclick= "'javascript:delUserImg(\"+${userImg.id}+'\');'" />
                </td>
                </tr>
            </table>
        </div>
    </form>
    <button id ="add">AddUser</button>

    <!--显示分页信息部分代码-->
    <div class="modal-footer no-margin-top">
    <div class="col-md-6" >
        <strong>当前第[${pagelnfo.pageNum)}]页,共[[${pageInfo.pages}]]
            页-共[[${pagelnfo.total)]]条记录
        </strong>
    </div>
        <ul class=" pagination pull-right no-margin" >
            <li th:if=”${pageInfo.hasPreviousPage}" >
                <a th:href="users?pageNum=1">首页</a>
            </li>
            <li class=" prev" th:if=" ${pageInfo.hasPreviousPage}" >
                <a th:href= "'users?pageNum=' + ${pageInfo.prePage}">
                    <li class=" ace-icon fa fa-angle-double-left"> </li>
                </a>
            </li>
            <!--遍历条数-->
            <li th:each= "nav:${pageInfo.navigatepageNums}" >
            <a th:href= "'users?pageNum=' + ${nav}" th:text=”${nav}"
            th:if=" ${nav != pageInfo.pageNum}"> </a>
            <span style="font-weight: bold;background: #6faed9;"
                th:if="${nav == pagelnfo.pageNum}" th:text=”${nav}" > </span>
            </li>
            <li class="next" th:if=" ${pagelnfo.hasNextPage}">
                <a th:href= "'users?pageNum=' + ${pageInfo.nextPage}">
                    <li class="ace-icon fa fa-angle-double-right"> </li>
                </a>
            </li>
            <li>
                <a th:href= "users?pageNum=' + ${pageInfo.pages}">尾页</a>
            </li>
        </ul>
    </div>

    <script>
        function isBlank(str) {
            if(str == ""|| str == null||str == undefined){
                return true;
            }else {
                return false;
            }
        }
        $("#modify").click(function () {
            var id = $("#id").val();
            var name = $("#name").val();
            var password = $("#pwd").val();
            var role = $("#role").val();
            if (isBlank(name)||isBlank(password)||isBlank(role)){
                window.confirm("请完善信息");
            }else{
                var param= {
                    "id":id,
                    "name":name,
                    "password":password,
                    "role":role
                };
                $.ajax({
                    url: "/modifyUser",
                    data: param,
                    async: true,
                    success: function (result) {
                        window.confirm(result,msg);
                        location.href = "users";
                    }
                });
            }
        });

    </script>
</div>
</body>
</html>